<template>
  <div style="margin-left: 30px; margin-top: 15px">
    <!-- 查询条件 -->
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="配种日期">
          <el-date-picker type="datetimerange" range-separator="" start-placeholder="Start date"
            end-placeholder="End date" value-format="YYYY-MM-DD" style="width: 310px" v-model="Searchs.InDate" />
        </el-form-item>
        <el-form-item label="种母耳号">
          <el-input clearable v-model="Searchs.Earbugles" style="width: 180px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="danger" size="default" :icon="Search" @click="GetHistoryList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮 -->
    <div style="margin-top: 9px">
      <el-button type="danger" size="default" :icon="Plus" @click="OpenCreate">新增</el-button>
      <el-button type="danger" size="default" :icon="Delete" @click="DelAll">删除</el-button>
    </div>

    <!-- 列表 -->
    <div style="margin-top: 25px">
      <el-table stripe style="width: 85%" @selection-change="GetBreedingIds" :data="HistoryList">
        <el-table-column type="selection" width="35" fixed align="center" />
        <el-table-column prop="name" label="序号" align="center" fixed>
          <template #default="a">
            <span>{{ a.$index + (page.pageIndex - 1) * page.pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="earbugles" label="种母耳号" align="center" width="130" />
        <el-table-column prop="breedingDate" label="配种日期" align="center" width="130">
          <template v-slot="a">
            <span v-if="a.row.breedingDate">{{
              a.row.breedingDate.substring(0, 10)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="seedMaleEarbugles" label="种公耳号" align="center" width="130" />
        <el-table-column prop="pregnancyCheckDate" label="妊检日期" align="center" width="130">
          <template v-slot="a">
            <span v-if="a.row.pregnancyCheckDate">{{
              a.row.pregnancyCheckDate.substring(0, 10)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="pregnancyCheckResult" label="妊检结果" align="center" />
        <el-table-column prop="deliveryDate" label="分娩日期" align="center" width="130">
          <template v-slot="a">
            <span v-if="a.row.deliveryDate">{{
              a.row.deliveryDate.substring(0, 10)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="healthyLambNumber" label="健羔数" align="center" />
        <el-table-column prop="healthyLambWeight" label="健羔总重" align="center" width="130px">
          <template v-slot="a">
            <span v-if="a.row.healthyLambWeight">{{ a.row.healthyLambWeight + "斤" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="weakLambNumber" label="弱羔数" align="center" width="130px" />
        <el-table-column prop="deformityNumber" label="畸形数" align="center" width="130px" />
        <el-table-column prop="stillbirthNumber" label="死胎数" align="center" width="130px" />
        <el-table-column prop="mummyNumber" label="木乃伊数" align="center" width="130px" />
        <el-table-column prop="freaksNumber" label="畸胎数" align="center" width="130px" />
        <el-table-column prop="weaningDate" label="断奶日期" align="center" width="130px">
          <template v-slot="a">
            <span v-if="a.row.weaningDate">{{ a.row.weaningDate.substring(0, 10) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="weaningNumber" label="断奶只数" align="center" width="130px" />
        <el-table-column prop="weightOfWeaningLitter" label="断奶窝重" align="center" width="130px" />
        <el-table-column prop="atPresentParity" label="当前胎次" align="center" width="130px" />
        <el-table-column prop="createBy" label="创建人" align="center" width="130px" />
        <el-table-column prop="createDate" label="创建时间" align="center" width="130px">
          <template v-slot="a">
            <span v-if="a.row.createDate">{{ a.row.createDate.substring(0, 10) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateBy" label="修改人" align="center" width="130px" />
        <el-table-column prop="updateDate" label="修改时间" align="center" width="130px">
          <template v-slot="a">
            <span v-if="a.row.updateDate">{{ a.row.updateDate.substring(0, 10) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="130px">
          <template v-slot="a">
            <el-link type="primary" style="margin-right: 15px"
              @click="OpenUpd(a.row.earbugles, a.row.atPresentParity)">编辑</el-link>
            <el-link type="primary" @click="HistoryDel(a.row.recordId)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <table style="margin: auto;margin-left: 300px;margin-top: 25px;">
      <tbody>
        <tr>
          <td>
            <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
              :page-sizes="[10, 15, 35, 50]" :background="true" layout="total, slot,sizes" :total="page.totalCount"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
              <span>，共{{ page.pageCount }}页，当前第{{ page.pageIndex }}/{{
                page.pageCount
              }}页</span>
            </el-pagination>
          </td>
          <td>
            <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
              :page-sizes="[10, 15, 35, 50]" :background="true" layout="slot, prev, pager, next"
              :total="page.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              prev-text="上一页" next-text="下一页">
              <button class="btn-prev" @click="handleCurrentChange(1)" :disabled="page.pageIndex == 1">
                首页
              </button>
            </el-pagination>
          </td>
          <td>
            <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
              :page-sizes="[10, 15, 35, 50]" :background="true" layout="slot, jumper" :total="page.totalCount"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
              <button class="btn-next" @click="handleCurrentChange(page.pageCount)"
                :disabled="page.pageIndex == page.pageCount">
                尾页
              </button>
            </el-pagination>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 添加弹出层 -->
    <div>
      <el-dialog v-model="dialogVisible" title="添加种母历史记录信息" width="1300" style="height: 600px">
        <span>
          <div class="dialog-footer">
            <div style="margin-left: 25px; margin-top: 15px">
              <!-- 按钮操作 -->
              <div>
                <el-button type="danger" size="default" :icon="Plus" @click="AddRow"
                  v-show="HistoryInfo.recordId == 0">新增</el-button>
                <el-button type="danger" size="default" :icon="Document" @click="HistoryInfoCreate"
                  v-show="HistoryInfo.recordId == 0">保存</el-button>
                <el-button type="danger" size="default" :icon="Document" v-show="HistoryInfo.recordId > 0"
                  @click="HistoryInfoCreate">修改</el-button>
              </div>
              <!-- 添加信息表单 -->
              <div style="margin-top: 35px">
                <el-table style="width: 90%" :data="RowList">
                  <el-table-column label="序号" align="center">
                    <template #default="a">
                      {{ a.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column label="*种母耳号" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-input v-model="HistoryInfo.earbugles" style="width: 125px" @blur="GetHistoryInfo" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="*配种日期" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-date-picker v-model="HistoryInfo.breedingDate" type="date" placeholder="请选择" clearable
                          style="width: 120px" value-format="YYYY-MM-DD" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="种公耳号" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-input v-model="HistoryInfo.seedMaleEarbugles" style="width: 125px" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="妊检日期" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-date-picker v-model="HistoryInfo.pregnancyCheckDate" type="date" placeholder="请选择" clearable
                          style="width: 120px" value-format="YYYY-MM-DD" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="妊检结果" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-input v-model="HistoryInfo.pregnancyCheckResult" style="width: 125px" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="分娩日期" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-date-picker v-model="HistoryInfo.deliveryDate" type="date" placeholder="请选择" clearable
                          style="width: 120px" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="健羔数" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-input v-model="HistoryInfo.healthyLambNumber" style="width: 125px" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="健羔总重" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-input v-model="HistoryInfo.healthyLambWeight" style="width: 125px" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="弱羔数" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-input v-model="HistoryInfo.weakLambNumber" style="width: 125px" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="畸形数" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-input v-model="HistoryInfo.deformityNumber" style="width: 125px" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="死胎数" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-input v-model="HistoryInfo.stillbirthNumber" style="width: 125px" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="木乃伊数" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-input v-model="HistoryInfo.mummyNumber" style="width: 125px" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="*当前胎次" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-input v-model="HistoryInfo.atPresentParity" style="width: 125px" @blur="GetHistoryInfo" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="断奶日期" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-date-picker v-model="HistoryInfo.weaningDate" type="date" placeholder="请选择" clearable
                          style="width: 120px" value-format="YYYY-MM-DD" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="断奶只数" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-input v-model="HistoryInfo.weaningNumber" style="width: 125px" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="断奶窝重" align="center" width="150">
                    <template v-slot="a">
                      <span v-if="activeIndex == a.$index">
                        <el-input v-model="HistoryInfo.weightOfWeaningLitter" style="width: 125px" />
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, inject, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Document, Delete, Back, Search } from "@element-plus/icons-vue";
import http from '@/http'


//删除种母历史记录
//批量删除
var HistoryIds = ref("");
const GetBreedingIds = (ids: any) => {
    for (let index = 0; index < ids.length; index++) {
      HistoryIds.value += ids[index].recordId + ",";
    }
}
const DelAll = () => {
  HistoryDel(HistoryIds.value.substring(0, HistoryIds.value.length - 1));
}
//删除
const HistoryDel = (id: any) => {
  ElMessageBox.confirm(
    '确定要删除吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(() => {
      http.delete("Kroute/api/Historys/HistoryDelete?Ids=" + id).then(x => {
        if (x.data > 0) {
          ElMessage.success("删除成功")
          GetHistoryList();
        } else {
          ElMessage.error("删除失败")
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消操作',
      })
    })
}




//修改种母历史记录
//打开弹出层
const OpenUpd = (ear: any, at: any) => {
  RowList.value = [];
  dialogVisible.value = true;
  AddRow();
  HistoryInfo.earbugles = ear;
  HistoryInfo.atPresentParity = at;
  GetHistoryInfo();
}


//根据耳号和胎次找到种母历史记录信息
const GetHistoryInfo = () => {
  if (HistoryInfo.earbugles != null && HistoryInfo.atPresentParity != null) {
    http
      .get(
        `RouteRead/api/Historys/GetHistoryInfo?Earbugles=${HistoryInfo.earbugles}&AtPresentParity=${HistoryInfo.atPresentParity}`
      )
      .then((x) => {
        var res = x.data;
        if (x.data) {
          HistoryInfo.recordId = res.recordId;
          HistoryInfo.breedingDate = res.breedingDate;
          HistoryInfo.seedMaleEarbugles = res.seedMaleEarbugles;
          HistoryInfo.pregnancyCheckDate = res.pregnancyCheckDate;
          HistoryInfo.pregnancyCheckResult = res.pregnancyCheckResult;
          HistoryInfo.deliveryDate = res.deliveryDate;
          HistoryInfo.healthyLambNumber = res.healthyLambNumber;
          HistoryInfo.healthyLambWeight = res.healthyLambWeight;
          HistoryInfo.weakLambNumber = res.weakLambNumber;
          HistoryInfo.deformityNumber = res.deformityNumber;
          HistoryInfo.stillbirthNumber = res.stillbirthNumber;
          HistoryInfo.mummyNumber = res.mummyNumber;
          HistoryInfo.freaksNumber = res.freaksNumber;
          HistoryInfo.weaningDate = res.weaningDate;
          HistoryInfo.weaningNumber = res.weaningNumber;
          HistoryInfo.weightOfWeaningLitter = res.weightOfWeaningLitter;
          HistoryInfo.createBy = res.createBy;
          HistoryInfo.createDate = res.createDate;
          HistoryInfo.updateBy = res.updateBy;
          HistoryInfo.updateDate = res.updateDate;
          HistoryInfo.isDel = res.isDel;
        }
      });
  }
};

//获取种母历史记录
//修改页容量
const handleSizeChange = (val: any) => {
  page.pageSize = val;
  GetHistoryList();
}
//修改页序号
const handleCurrentChange = (val: any) => {
  page.pageIndex = val;
  GetHistoryList();
}
//查询条件
const Searchs = reactive({
  InDate: [],
  Earbugles: "",
});
//分页数据
const page = reactive({
  pageIndex: 1,
  pageSize: 10,
  totalCount: 0,
  pageCount: 0,
});
const HistoryList = ref([]);
const GetHistoryList = () => {
  var dates = "";
  if (Searchs.InDate) {
    dates = Searchs.InDate.join(",");
  }
  http
    .get("RouteRead/api/Historys/GetHistoryList", {
      params: {
        pageIndex: page.pageIndex,
        pageSize: page.pageSize,
        InDate: dates,
        Earbugles: Searchs.Earbugles,
      },
    })
    .then((x) => {
      HistoryList.value = x.data.datas;
      page.totalCount = x.data.totalCount;
      page.pageCount = x.data.pageCount;
    });
};

//新增行操作
const OpenCreate = () => {
  HistoryInfo.recordId = 0;
  RowList.value = [];
  dialogVisible.value = true;
};
const activeIndex = ref(-1);
var RowList = ref<{}[]>([]);
const AddRow = () => {
  var newRow = {
    createBy: "string",
    createDate: "2024-04-28T06:55:09.545Z",
    updateBy: "string",
    updateDate: "2024-04-28T06:55:09.545Z",
    isDel: true,
    recordId: 0,
    earbugles: "string",
    breedingDate: "2024-04-28T06:55:09.545Z",
    seedMaleEarbugles: "string",
    pregnancyCheckDate: "2024-04-28T06:55:09.545Z",
    pregnancyCheckResult: "string",
    deliveryDate: "2024-04-28T06:55:09.545Z",
    healthyLambNumber: 0,
    healthyLambWeight: 0,
    weakLambNumber: 0,
    deformityNumber: 0,
    stillbirthNumber: 0,
    mummyNumber: 0,
    freaksNumber: 0,
    atPresentParity: 0,
    weaningDate: "2024-04-28T06:55:09.545Z",
    weaningNumber: 0,
    weightOfWeaningLitter: 0,
  };
  RowList.value.push(newRow);
  activeIndex.value = RowList.value.length - 1;
};

//添加种母历史记录
const dialogVisible = ref(false);
const HistoryInfo = reactive({
  createBy: "string",
  createDate: "2024-04-28T05:45:34.351Z",
  updateBy: "string",
  updateDate: "2024-04-28T05:45:34.351Z",
  isDel: false,
  recordId: 0,
  earbugles: null,
  breedingDate: null,
  seedMaleEarbugles: null,
  pregnancyCheckDate: null,
  pregnancyCheckResult: null,
  deliveryDate: null,
  healthyLambNumber: null,
  healthyLambWeight: null,
  weakLambNumber: null,
  deformityNumber: null,
  stillbirthNumber: null,
  mummyNumber: null,
  freaksNumber: null,
  atPresentParity: null,
  weaningDate: null,
  weaningNumber: null,
  weightOfWeaningLitter: null,
});
const HistoryInfoCreate = () => {
  //必输项
  if (!HistoryInfo.earbugles) {
    ElMessage.error("请输入种母耳号");
    return;
  }
  if (!HistoryInfo.breedingDate) {
    ElMessage.error("请选择配种日期");
    return;
  }
  if (!HistoryInfo.atPresentParity) {
    ElMessage.error("请输入当前胎次");
    return;
  }
  http.post("Kroute/api/Historys/HistoryCreate", HistoryInfo).then((x) => {
    if (x.data > 0) {
      ElMessage.success("保存种母历史记录成功");
      dialogVisible.value = false;
      GetHistoryList();
    } else {
      ElMessage.error("保存种母历史记录失败");
    }
  });
};

onMounted(() => {
  GetHistoryList();
});
</script>

<style></style>
